<template>


  <el-card class="box-card">
      <el-row :gutter="10">


          <el-col :span="6">
              <el-input v-model="name" placeholder="请输入关键词"></el-input>
          </el-col>
          <div class="btn">
              <el-button type="info" @click="clear">重置</el-button>
              <el-button type="primary" @click="select">查询</el-button>
              <el-button type="success" @click="add">新增</el-button>

          </div>
      </el-row>
  </el-card>



  <el-card class="box-card2">
      <el-table
              :data="hospitalList"
              style="width: 100%">
          <el-table-column
                  align="center"
                  prop="id"
                  label="序号"
                  width="100px"
          >
          </el-table-column>

          <el-table-column
                  align="center"
                  prop="name"
                  label="名称"
          >
          </el-table-column>


          <el-table-column label="操作" width="200" align="center">
              <template #default="{ row }">

                  <div class="mybtn">

                      <el-button plain type="warning" mybtnsmall class="smallbtn">编辑
                      </el-button>

                      <el-button plain type="danger" @click="del(row)" class="smallbtn">删除
                      </el-button>

                  </div>
              </template>

          </el-table-column>


          <template #empty>
              <el-empty description="没有数据"/>
          </template>

      </el-table>


      <el-pagination class="fenye"
                     @size-change="handleSizeChange"
                     @current-change="handleCurrentChange"
                     v-model:current-page="pageNum"
                     v-model:page-size="pageSize"
                     :page-sizes="[2, 4, 6, 8]"
                     layout="total, sizes, prev, pager, next, jumper"
                     :total="total">
      </el-pagination>

  </el-card>


  <el-dialog title="添加医院" v-model="dialogFormVisible" @close="clear()" width="1800px">

      <el-form :model="form" ref="formRef" :rules="rules" label-width="100px">
          <el-form-item label="医院名" prop="name">
              <el-input v-model="form.name" placeholder="请输入课程名"></el-input>
          </el-form-item>

      </el-form>

      <div slot="footer" class="dialog-footer">
          <el-button @click=clear>取 消</el-button>
          <el-button type="primary" @click="save">确 定</el-button>
      </div>
  </el-dialog>


  <el-dialog title="修改医院" v-model="dialogFormVisibleUpdate" @close="clear()" width="1800px">

      <el-form :model="form" ref="formRef" :rules="rules" label-width="100px">
          <el-form-item label="医院名" prop="name">
              <el-input v-model="form.name" placeholder="请输入课程名"></el-input>
          </el-form-item>

      </el-form>

      <div slot="footer" class="dialog-footer">
          <el-button @click=clear>取 消</el-button>
          <el-button type="primary" @click="save">确 定</el-button>
      </div>
  </el-dialog>

</template>

<script setup>
  import {ref, reactive, onMounted} from "vue"
  import axios from 'axios'

  const name = ref('')
  const pageNum = ref(1)
  const pageSize = ref(2)
  const total = ref('')
  const hospitalList = ref([])
  const form = ref({})
  const dialogFormVisible = ref(false)
  const dialogFormVisibleUpdate = ref(false)
  const formRef = ref()

  onMounted(() => {
      select()
  })


  const select = async () => {
      const res = await axios.get('/hospital/list?pageNum=' + pageNum.value + '&pageSize=' + pageSize.value + '&name=' + name.value)
      hospitalList.value = res.data.data.items
      total.value = res.data.data.total
  }


  const clear = () => {

      dialogFormVisible.value = false
      dialogFormVisibleUpdate.value = false
      name.value = ''
      select()
      formRef.value.resetFields();
      form.value ={}

  }


  const handleSizeChange = (ps) => {
      pageSize.value = ps
      select()
  }


  const handleCurrentChange = (num) => {
      pageNum.value = num
      select()

  }


  const add = () => {
      form.value = {}
      dialogFormVisible.value = true
  }


  const rules = ref({
      name: [
          {required: true, message: '请输入医生名', trigger: 'blur'},
          {
              pattern: /^\S{2,10}/,
              message: '课程名长度在2-10个非空字符',
              trigger: 'blur'
          }
      ],

  })


  const save = async () => {

      await formRef.value.validate()
      const res = await axios.post('/hospital', form.value)
      ElNotification({
          title: '医院管理',
          message: '保存成功',
          duration: 2000,
          type:'success'
      })
      clear()

  }


  const update = (item) => {
      form.value = item
      dialogFormVisibleUpdate.value = true
  }

  const del = async (item) => {
      const res = await axios.get('/hospital/del?id='+item.id)
      ElNotification({
          title: '医院管理',
          message: '删除成功',
          duration: 2000,
          type:'success'
      })

      clear()
  }

</script>

<style scoped lang="scss">

  .hd {
      height: 100px;
      background-color: #fff;
      margin-top: 15px;
      box-shadow: 0 -.05333333rem .42666667rem 0 rgba(14, 86, 127, .09);
  }


  .box-card {
      margin-top: 15px;
  }

  .btn {
      margin-left: 20px;
  }

  .box-card2 {
      margin-top: 15px;
      height: 700px;
  }

  .fenye {
      margin-top: 30px;
      margin-left: 33%;
  }

  .ccc {
      width: 400px;

      margin: 10px auto;
      /*background-color: skyblue;*/
  }

  .preview {
      width: 95%;

  }

  .fenye {
      margin-top: 30px;
      margin-left: 33%;
  }

  .dialog-footer {
      margin-left: 40%;
  }

</style>
